<template>
  <div>
    <router-link to="/">
      <div class="bannerBack" v-show="flag">
        <span class="iconfont">&#xe624;</span>
      </div>
    </router-link>
    <div class="header" v-show="!flag" :style="opacityStyle">
      <router-link to="/" tag="span" class="iconfont back-icon">
        &#xe624;
      </router-link>
      茂名森林公园
    </div>
  </div>
</template>
<script>
export default {
  name: 'DetailHearder' ,

  data () {
    return {
      flag: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
     const top = document.documentElement.scrollTop;
     console.log(top)
     if(top>60){
       let opacity = top / 140;
       opacity = opacity >1 ?1 :opacity;
       this.opacityStyle = { opacity };
       this.flag = false
     }else{
       this.flag = true
     }

    }
  }

  }
</script>
<style scoped>
 .header {
   width: 100%;
   height: 40px;
   background-color: green;
   color: white;
   position:fixed;
   text-align: center;
   line-height: 40px;
   top: 0;
   left: 0;
   z-index: 2;
   overflow: hidden;
 }
 .bannerBack {
   width: 40px;
   height: 40px;
   border-radius: 40px;
   position:absolute;
   left: 10px;
   top:10px;
   background-color:#000000;
 }
 .bannerBack span {
   position: absolute;
   left: 11px;
   top:13px;
 }
  .back-icon {
    position: absolute;
    left: 10px;
  }

</style>
